<template>
  <div>
    <right-title subTitle="隔油池当前状态"></right-title>
    <div class="container flex-row">

      <div class="chart-bg">
        <div class="chart-view"
             ref="chart1"></div>
      </div>

      <div class="chart-right flex-col align-center">
        <div class="chart-item flex-row align-center">
          <img src="@/assets/images/j-1.png"
               alt="">

          <span class="chart-item-title">超时清理：</span>

          <span class="chart-item-value"
                style="color: #FFC53D;">{{chartData[0].value}}</span>

          <span class="chart-item-title">个</span>
        </div>

        <div class="chart-item flex-row align-center">
          <img src="@/assets/images/j-2.png"
               alt="">

          <span class="chart-item-title">急需清理：</span>

          <span class="chart-item-value"
                style="color: #BB8BF6;">{{chartData[1].value}}</span>

          <span class="chart-item-title">个</span>
        </div>

        <div class="chart-item flex-row align-center">
          <img src="@/assets/images/j-3.png"
               alt="">

          <span class="chart-item-title">暂不清理：</span>

          <span class="chart-item-value"
                style="color: #7888B2;">{{chartData[2].value}}</span>

          <span class="chart-item-title">个</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let chart = null;
import * as echarts from 'echarts'
import RightTitle from '@/components/RightTitle.vue'
import { apiGetOilPoolCurrentSituation } from '@/api/api'
export default {
  components: { RightTitle },
  data () {
    return {
      chartData: [
        { value: 0, name: '超时清理' },
        { value: 0, name: '急需处理' },
        { value: 0, name: '暂不处理' },
      ],
      percent:0,
    }
  },
  beforeDestroy () {
    if (chart) {
      chart.clear();
    }
  },
  destroyed () {
    if (chart) {
      chart.dispose();
    }
  },
  mounted () {
    //this.initChart();
    this.getData()
  },
  methods: {
    getData(){
      apiGetOilPoolCurrentSituation().then((res)=>{
        if(res.code == 1){
          this.chartData[0].value = res.data.over;
          this.chartData[1].value = res.data.ongoing;
          this.chartData[2].value = res.data.normal;

          if(res.data.over+res.data.ongoing+res.data.normal >0){
          this.percent = (res.data.over/(res.data.over+res.data.ongoing+res.data.normal))*100;
          this.percent = this.percent.toFixed(2);
          }

        }
      }).finally(()=>{
        this.initChart()
      })
    },
    initChart () {
      chart = echarts.init(this.$refs.chart1)
      let percent = this.percent;
      let option = {
        // legend: {
        //   type: 'plain'
        // },
        legendHoverLink: true,
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: [" #FFC53D", "#BB8BF6", "#7888B2"],
        series: [
          {
            name: '隔油池当前状态',
            type: 'pie',
            avoidLabelOverlap: true,
            legendHoverLink: true,  // 是否启用图例 hover 时的联动高亮。
            hoverAnimation: true,   // 是否开启 hover 在扇区上的放大动画效果。
            radius: ['50%', '85%'],
            center: ['50%', '50%'],
            roseType: 'area',
            // labelLine: {
            //   show: false
            // },
            label: {
              show: true,
              position: 'center',
              color: "#fff",
              formatter: function (params) {
                var str = '{valSty|' + percent + '}{per|%}\n{nameSty|超时率}'
                return str;
              },
              rich: {
                valSty: {
                  color: "#FEC53E",
                  fontSize: 22,
                  fontWeight: 400,
                  height: 30
                },
                per: {
                  fontSize: 14,
                  color: "#FEC53E",
                },
                nameSty: {
                  color: "#fff",
                  fontSize: 16,
                }
              },
              emphasis: {
                show: true,
              }
              // position: 'inside' //outside 外侧展示  inside 内侧展示 
              // hover高亮情况下
              // emphasis: {
              //   show: true,
              //   formatter: function (params) {
              //     var str = '{valSty|' + params.value + '手}\n{nameSty|' + params.name + '}'
              //     return str;
              //   },
              //   rich: {
              //     valSty: {
              //       color: "#333",
              //       fontSize: 20,
              //       fontWeight: 700,
              //       height: 30
              //     },
              //     nameSty: {
              //       color: "#999",
              //       fontSize: 20,
              //     }
              //   }
              // },
            },
            // 文本标签的视觉引导线
            labelLine: {
              length: 30,
              length2: 60
            },
            itemStyle: {
              borderWidth: 2,
            },
            // itemStyle: {
            //   borderRadius: 5
            // },
            data: this.chartData
          }
        ]
      };

      chart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 20px;

  .chart-bg {
    background: url('@/assets/images/circle-bg.png') no-repeat;
    background-size: 100% 100%;
    width: 190px;
    height: 190px;

    display: flex;
    justify-content: center;
    align-items: center;

    .chart-view {
      width: 150px;
      height: 150px;
    }
  }

  .chart-right {
    margin-left: 20px;

    .chart-item {
      width: 188px;
      height: 50px;
      box-shadow: inset 0px 0px 22px 0px rgba(143, 239, 252, 0.2);
      border-radius: 3px;
      // opacity: 0.4;
      border: 1px solid #2ea8d0;

      margin-bottom: 12px;

      img {
        width: 14px;
        height: 14px;

        margin: 0 14px;
      }

      .chart-item-title {
        font-size: 15px;
        font-weight: 500;
        color: #c3cde5;
        line-height: 21px;
      }

      .chart-item-value {
        margin-top: -8px;
        font-size: 27px;
        font-weight: bold;
        // color: #ffc53d;
        line-height: 38px;
      }
    }
  }
}
</style>